<template>
	<view class="cenTen">
		<view class="system" v-for="(time,index) in list" :key='index' @click="listidx(index)">
			<image :src="time.newimg" mode=""></image>
			<view class="date_title">
				<view class="system_title">
					<view class="system_title_view">{{time.newtile}}</view>
					<view class="system_title_bq">{{time.newdata}}</view>
				</view>
				<view class="system_date">
					<view class="system_title_text">{{time.newtext}}</view>
					<uni-badge text="2" type="error" size='small'></uni-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	export default {
		components: {uniBadge},
		data() {
			return {
				list:[
					{
						newimg:'../../static/images/system.png',
						newtile:'系统消息',
						newtext:'尊敬的客户您好，您有新的系统消息',
						newdata:'刚刚',
					},
					{
						newimg:'../../static/images/order.png',
						newtile:'订单消息',
						newtext:'尊敬的客户您好，您有新的订单消息',
						newdata:'1分钟前',
					},
					{
						newimg:'../../static/images/order.png',
						newtile:'订单消息',
						newtext:'尊敬的客户您好，您有新的订单消息',
						newdata:'2019/8/7 15:30',
					},
				]
			}
			
		},
		methods: {
			listidx(index){
				uni.navigateTo({
					url:'system'
				})
			}
		}
	}
</script>

<style>
	.system{
		display: flex;
		justify-content: space-between;
		width: 94%;
		padding: 18upx 3%;
	}
	.system image{
		width: 76upx;
		height: 76upx;
		border-radius: 50%;
		margin-top: 10upx;
	}
	.system_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.date_title{
		width: 85%;
	}
	.system_title_view{
		font-size: 34upx;
		color:  #333;
		width: 50%;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.system_title_bq{
		color: #bdbdbd;
		font-size: 28upx;
	}
	.system_title_text{
		font-size: 30upx;
		width: 100%;
		color: #777;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 3upx;
	}
	.system_title view{
		line-height: 1.4;
	}
	.system_date{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 6upx;
	}
	.system_date view{
		line-height: 1.3;
	}
	.system_date text{
		line-height: 1.2;
	}
	.system_date uni-badge{
		font-size: 29upx;
		line-height: 1.4;
	}
</style>
